<template>
  <div class="chart-line">
    <el-button-group class="chart-btns">
      <el-button
        size="small"
        v-for="(item, index) in chartList"
        :key="index"
        :class="{ actived: item.key === activeType }"
        @click="() => handleChangeType(item)"
      >
        {{ item.value }}
      </el-button>
    </el-button-group>
    <div id="chart" ref="chartRef"></div>
  </div>
</template>

<script>
export default {
  name: "chartLine",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {
      activeType: "line",
      chartList: [
        {
          key: "line",
          value: "折线图",
        },
        {
          key: "smoothLine",
          value: "平滑曲线图",
        },
        {
          key: "bar",
          value: "柱状图",
        },
      ],
    };
  },
  computed: {},
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chartRef);
  },
  methods: {
    initPage() {
      this.initData();
      this.initOption();
    },
    getSeriesType() {
      const lineKeys = ["line", "smoothLine"];
      if (lineKeys.includes(this.activeType)) {
        return "line";
      }
      return this.activeType;
    },
    getSmoothValue() {
      const smoothKeys = ["smoothLine"];
      if (smoothKeys.includes(this.activeType)) {
        return true;
      }
      return false;
    },
    initData() {
      this.legend = [];
      let { title, data, xAxis } = this.data.con;
      this.title = title;
      this.xAxis = xAxis;
      this.series = [];
      for (let key in data) {
        this.legend.push(key);
        let obj = {
          name: key,
          data: data[key],
          type: this.getSeriesType(),
          smooth: this.getSmoothValue(),
        };
        this.series.push(obj);
      }
    },
    initOption() {
      this.option = {
        title: {
          left: "center",
          text: this.title,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          type: "plain",
          data: this.legend,
          bottom: 0,
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 50,
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: this.xAxis,
        },
        yAxis: {
          type: "value",
        },
        series: this.series,
      };
      //this.myChart.clear();
      // console.log(this.option);
      this.myChart.setOption(this.option);
    },
    handleChangeType(item) {
      this.activeType = item.key;

      this.initPage();
      this.$nextTick(() => {
        this.myChart.resize();
      });
    },
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
          newVal && this.initPage();
        });
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
@import "../index.scss";
.chart-btns {
  margin-top: 8px;
  color: #5f6a7a;
  font-size: 14px;
  // display: flex;
  // justify-content: flex-end;
}
.actived {
  color: #436fff;
  margin-right: 1px !important;
  // background: #ecf1ff;
  border-color: #436fff !important;
  background: #fff;
  border-color: rgb(220, 223, 230);
}
</style>
